<template>
  <div class="container">
    <!-- Category Selector -->
    <div class="category-selector">
      <el-radio-group v-model="selectedCategory" @change="fetchFoodByCategory" class="radio-group">
        <el-radio label="禁吃" :name="1">禁吃</el-radio>
        <el-radio label="慎吃" :name="2">慎吃</el-radio>
        <el-radio label="可以吃" :name="3">可以吃</el-radio>
        <el-radio label="水果" :name="'水果'">水果</el-radio>
        <el-radio label="坚果" :name="'坚果'">坚果</el-radio>
        <el-radio label="海鲜" :name="'海鲜'">海鲜</el-radio>
        <el-radio label="零食甜品" :name="'零食甜品'">零食甜品</el-radio>
      </el-radio-group>
    </div>

    <!-- Food List Table -->
    <div class="food-list">
      <el-table :data="food" stripe border style="width: 100%">
        <el-table-column prop="food" label="食物名称"></el-table-column>
        <el-table-column prop="type" label="食物类型"></el-table-column>
        <el-table-column prop="grade" label="食用等级">
          <template #default="{ row }">
            <el-tag :type="row.grade === 1 ? 'danger' : row.grade === 2 ? 'warning' : 'success'">
              {{ gradeEnum[row.grade] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="image" label="食物图片">
          <template #default="{ row }">
            <img :src="row.image" alt="食物图片" class="food-image">
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { get } from '@/utils/request';

const species = ref('2');
const food = ref([]);
const selectedCategory = ref('禁吃');
const gradeEnum = {
  1: '禁吃',
  2: '慎吃',
  3: '可以吃'
};

onMounted(() => {
  fetchFoodByCategory(selectedCategory.value);
});

function fetchFoodByCategory(category) {
  for (let index = 1; index < 4; index++) {
    if (gradeEnum[index] === category) {
      category = index;
    }
  }

  let url = '';
  if (typeof category === 'number') {
    url = `http://127.0.0.1:8000/index/foodgrade/?grade=${category}&species_id=${species.value}`;
  } else {
    url = `http://127.0.0.1:8000/index/foodtype/?type=${category}&species_id=${species.value}`;
  }

  get(url).then(result => {
    if (result.data.code === 200) {
      food.value = result.data.data.map(item => ({
        ...item,
        grade: parseInt(item.grade),
      }));
    }
  }).catch(err => {
    console.error(err);
  });
}
</script>

<style scoped>
/* Container and Layout */
.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Category Selector Styling */
.category-selector {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.radio-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.el-radio {
  background-color: #e0f7fa;
  border-radius: 5px;
  padding: 10px;
  color: #00796b;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.el-radio:hover {
  background-color: #b2ebf2; /* Hover effect */
}

/* Food List Table Styling */
.food-list {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-table {
  border-radius: 10px;
}

.el-tag.danger {
  background-color: #e53935;
  color: white;
}

.el-tag.warning {
  background-color: #ffb300;
  color: white;
}

.el-tag.success {
  background-color: #4caf50;
  color: white;
}

.food-image {
  max-width: 60px;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.food-image:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} 

/* Responsive Styles */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }

  .radio-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .el-radio {
    margin-bottom: 10px;
  }
}
</style>
